<template>
  <div class="dialog_sty">
    <div>
      <div class="lottery-container">
        <div style="text-align: right">
          <el-select
            @change="clickSelect"
            v-if="selectFlag"
            style="margin-right: 30px"
            v-model="level"
            placeholder="请选择"
          >
            <el-option
              v-for="(item, index) in dataInfo.cmsAwardTypeList"
              :key="index"
              :label="item.prizeName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-tooltip
            class="item"
            effect="dark"
            content="中奖名单将清空,请慎重选择"
            placement="bottom"
          >
            <el-button
              v-show="false"
              type="danger"
              class="reward_button"
              style="margin-right: 30px"
              @click="doRePrizeDraw"
              >重新抽奖</el-button
            >
          </el-tooltip>
          <el-button
            @click="openDescribe"
            style="margin-right: 30px; margin-top: 30px"
            >查看说明</el-button
          >
          <!-- <el-button @click="openSignUp" style="margin-right: 30px"
            >查看报名人员</el-button
          > -->
          <el-button style="margin-right: 20px" @click="openList"
            >查看中奖名单</el-button
          >
          <el-dropdown style="margin-right: 20px">
            <span class="el-dropdown-link">
              <el-button type="text">设置</el-button>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <el-button type="text" @click="exportWinnerList"
                  >导出中奖名单</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button type="text" @click="importWinnerList"
                  >导入中奖名单</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button type="text" @click="doRePrizeDraw"
                  >重新抽奖</el-button
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="bottom_box">
          <div class="left" v-if="selectFlag">
            <div class="reward_type">
              <span>{{ rewardLevel.prizeName }}</span>
            </div>
            <el-image
              style="width: 359px; height: 195px"
              :src="define.comUrl + rewardLevel.url"
            >
            </el-image>
            <div class="reward_number">
              <span>奖品:{{ rewardLevel.prizeNumber }}个</span>
            </div>
            <div class="shengyu">
              <div class="reward_number2">
                <span>每次抽{{ rewardLevel.everyTime }}人</span>
              </div>
              <!-- <div class="reward_number3">
                <span>还剩{{ rewardLevel.everyTime }}个奖品未抽</span>
              </div> -->
            </div>

            <div>
              <el-button
                :disabled="startFlag"
                class="reward_button"
                size="small"
                @click="startLottery"
                >开始抽奖</el-button
              >
              <el-button size="small" :disabled="endFlag" @click="beforeDestroy"
                >停止抽奖</el-button
              >
            </div>
          </div>

          <div class="name" v-if="peopleFlag">
            <div>
              <el-avatar
                v-if="lotteryName != null"
                :size="100"
                style="font-size: 40px; background: #409eff"
              >
                {{ lotteryName.charAt(0) }}
              </el-avatar>
            </div>

            <sapn>{{ lotteryName }} </sapn>
          </div>

          <div v-if="winListFlag" class="win_list">
            <el-table
              :data="winList"
              style="width: 100%"
              max-height="530"
              border
            >
              <el-table-column label="中奖名单" align="center">
                <el-table-column
                  label="序号"
                  type="index"
                  width="50"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="typeName"
                  label="中奖级别"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="userName"
                  label="姓名"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <el-table-column
                  prop="userPhone"
                  label="手机号"
                  width="180"
                  align="center"
                >
                </el-table-column>
                <!-- <el-table-column
                  prop="creatorTime"
                  label="中奖时间"
                  width="180"
                  align="center"
                >
                </el-table-column> -->
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      class="el_dialog1"
      title="说明"
      :visible.sync="dialogDescribe"
      width="40%"
      custom-class="centered-dialog"
    >
      <div
        style="
          font-size: 18px;
          font-weight: bold;
          margin-bottom: 10px;
          margin-left: 30px;
        "
      >
        <span>奖品说明</span>
      </div>
      <div class="every_item">
        <div
          class="baifenbi"
          :span="8"
          v-for="(item, index) in dataInfo.cmsAwardTypeList"
          :key="index"
          :offset="index"
        >
          <el-card :body-style="{ padding: '0px' }" style="width: 200px">
            <UploadImg
              :disabled="true"
              :detailed="true"
              modular="cleanplan"
              type="annexpic"
              v-model="item.prizeImage"
              :fileSize="5"
              sizeUnit="MB"
              :limit="3"
            ></UploadImg>

            <span
              style="font-weight: bold; margin-left: 15px; margin-bottom: 20px"
              >{{ item.prizeName }}</span
            >
            <div style="padding: 14px">
              <div class="bottom clearfix">
                <span>奖品数量: </span>
                <span style="color: red; margin-left: 20px; font-weight: bold"
                  >{{ item.prizeNumber }}个</span
                >
              </div>
            </div>
          </el-card>
        </div>
      </div>

      <div class="times">
        <span style="margin-left: 30px">每人最多中奖 </span
        ><span style="color: red; margin-right: 5px">{{
          dataInfo.enableNumber
        }}</span
        ><span>次</span>
      </div>
    </el-dialog>

    <el-dialog title="全部中奖名单" :visible.sync="winAllFlag" width="40%">
      <el-table :data="prizesList" style="width: 100%" border>
        <el-table-column label="中奖名单" align="center">
          <el-table-column label="序号" type="index" width="50" align="center">
          </el-table-column>
          <el-table-column prop="typeName" label="中奖级别" align="center">
          </el-table-column>
          <el-table-column prop="userName" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="userPhone" label="手机号" align="center">
          </el-table-column>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="查看报名人员" :visible.sync="openSignUpList" width="40%">
      <el-table :data="peopleList" style="width: 100%" border>
        <el-table-column label="序号" type="index" width="50" align="center">
        </el-table-column>
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="userPhone" label="手机号" align="center">
        </el-table-column>
        <el-table-column prop="creatorTime" label="报名时间" align="center">
        </el-table-column>
      </el-table>
    </el-dialog>
    <ExportBox v-if="exportBoxVisible" ref="exportBox" @download="download" />
    <!-- 导入 -->
    <ImportForm
      v-if="importFormVisible"
      ref="importUserForm"
      @refresh="freshimport"
    />
  </div>
</template>
<script>
import ImportForm from "./ImportForm";

import request from "@/utils/request";
import ExportBox from "./ExportBox.vue";
export default {
  name: "Activity",
  components: { ExportBox, ImportForm },

  data() {
    return {
      clickFlag: true,
      importFormVisible: false,
      exportBoxVisible: false,
      prizeId: "",
      dataInfo: "",
      activityId: "",
      openSignUpList: false,
      peopleList: [],
      prizesList: [],
      winAllFlag: false,
      winListFlag: false,
      winList: [],
      reward: "",
      typeItem: undefined,
      dialogDescribe: false,
      rewardLevel: {
        url: "",
      },
      selectFlag: false,
      level: "",
      startFlag: false,
      endFlag: true,
      peopleFlag: false,
      form: {
        enableNumber: undefined,
      },
      columnList: [
        { prop: "typeName", label: "中奖级别" },
        { prop: "userName", label: "姓名" },
        { prop: "userPhone", label: "手机号" },
      ],
      options: [
        {
          value: "一等奖",
          label: "一等奖",
        },
        {
          value: "二等奖",
          label: "一等奖",
        },
        {
          value: "三等奖",
          label: "一等奖",
        },
      ],
      value: "",
      lotteryInterval: null,
      names: [],
      currentIndex: 0,
      dialogVisible: false,
    };
  },
  mounted() {
    window.addEventListener("keydown", this.handleKeydown);
  },
  beforeDestroy() {
    window.removeEventListener("keydown", this.handleKeydown);
  },
  computed: {
    lotteryName() {
      return this.names[this.currentIndex];
    },
  },
  created() {
    var activityId = this.$route.query.activityId;
    this.activityId = activityId;
    this.init();
  },
  methods: {
    init(id) {
      //查询活动详情信息
      this.getList(id);
      //查询报名列表
      this.getPeopleList();
    },
    handleKeydown(event) {
      if (
        (event.key === " " || event.key === "Enter") &&
        this.clickFlag == true
      ) {
        this.clickFlag = false;
        this.startLottery();
      } else if (
        (event.key === " " || event.key === "Enter") &&
        this.clickFlag == false
      ) {
        this.clickFlag = true;
        this.beforeDestroy();
      }
    },
    getPeopleList() {
      request({
        url: `/api/cms/CmsAwardUser/getPeopleList/${this.activityId}`,
        method: "get",
      }).then((res) => {
        this.peopleList = res.data;
        this.names = this.peopleList.map((item) => item.userName);
        if (this.names.length > 0) {
          this.peopleFlag = true;
        }
      });
    },
    doRePrizeDraw() {
      this.$confirm("此操作将永久删除用户数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            url: `/api/cms/CmsActTypeUser/${this.activityId}`,
            method: "delete",
          }).then((res) => {
            this.level = this.dataInfo.cmsAwardTypeList[0].prizeName;
            this.rewardLevel = this.dataInfo.cmsAwardTypeList[0];
            this.rewardLevel.url = this.rewardLevel.prizeImage[0].url;
            this.prizeId = this.rewardLevel.id;
            this.peopleFlag = true;
            this.winListFlag = false;
            this.winList = undefined;
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    openSignUp() {
      this.openSignUpList = true;
    },

    getPrizeList() {
      var data = {
        activityId: this.activityId,
      };
      request({
        url: `/api/cms/CmsActTypeUser/getList`,
        method: "post",
        data: data,
      }).then((res) => {
        this.prizesList = res.data;
      });

      // prizeList(this.form.id).then((res) => {
      //   this.prizesList = res.data;
      // });
    },

    //查看中奖名单
    openList() {
      this.getPrizeList();
      this.winAllFlag = true;
    },
    //查看说明
    openDescribe() {
      this.dialogDescribe = true;
    },

    //选定奖品类型
    clickSelect(id) {
      this.rewardLevel = this.dataInfo.cmsAwardTypeList.find((e) => e.id == id);
      this.prizeId = id;
      this.rewardLevel.url = this.rewardLevel.prizeImage[0].url;
      this.winListFlag = false;
      this.peopleFlag = true;
    },

    /** 查询活动详情 */
    getList(id) {
      request({
        url: "/api/cms/CmsAwardActivity/" + this.activityId,
        method: "get",
      }).then((res) => {
        this.dataInfo = res.data;
        for (
          let index = 0;
          index < this.dataInfo.cmsAwardTypeList.length;
          index++
        ) {
          this.dataInfo.cmsAwardTypeList[index].prizeImage = JSON.parse(
            this.dataInfo.cmsAwardTypeList[index].prizeImage
          );
        }
        this.level = this.dataInfo.cmsAwardTypeList[0].prizeName;
        this.rewardLevel = this.dataInfo.cmsAwardTypeList[0];
        this.rewardLevel.url = this.rewardLevel.prizeImage[0].url;
        this.prizeId = this.rewardLevel.id;

        this.selectFlag = true;
      });
    },
    //中奖名单
    winningList(id) {
      getActivity(id).then((response) => {
        this.form = response.data;
        if (this.form.startTime != null && this.form.endTime != null) {
          var time = [];
          time[0] = this.form.startTime;
          time[1] = this.form.endTime;
          this.form.time = time;
        }
        this.awardResult = JSON.parse(this.form.awardResult);
      });
    },

    async startLottery() {
      // var date1 = new Date(this.form.startTime).getTime();
      // var date2 = new Date(this.form.endTime).getTime();
      // var nowDate = new Date().getTime();

      // if (nowDate < date1 || nowDate > date2) {
      //   this.$message({
      //     type: "info",
      //     message: "不在抽奖时间范围内",
      //   });
      //   return;
      // }

      var activityId = this.activityId;
      var prizeId = this.prizeId;
      let res = await request({
        url: `/api/cms/CmsAwardActivity/draw?activityId=${activityId}&prizeId=${prizeId}`,
        method: "get",
      });

      if (res.code == 200) {
        this.winList = res.data;
      } else {
        return;
      }
      // let res = await prizeDraw(prizeDrawform);
      // if (res.code == 200) {
      //   this.winList = res.data;
      // }

      // if (this.winList.length == 0) {
      //   return;
      // }

      this.lotteryInterval = setInterval(() => {
        this.currentIndex = (this.currentIndex + 1) % this.names.length;
      }, 100); // 每秒轮换一个名字
      this.startFlag = true;
      this.endFlag = false;

      this.winListFlag = false;
      this.peopleFlag = true;
    },

    beforeDestroy() {
      if (this.lotteryInterval) {
        clearInterval(this.lotteryInterval);
      }
      this.startFlag = false;
      this.endFlag = true;
      (this.peopleFlag = false), (this.winListFlag = true);
    },

    close_dialog() {
      this.dialogVisible = false;
    },
    //导出中奖名单
    exportWinnerList() {
      this.exportBoxVisible = true;
      this.$nextTick(() => {
        this.$refs.exportBox.init(this.columnList);
      });
    },
    //导出
    download(data) {
      let query = {
        ...data,
        ...this.listQuery,
        ...this.query,
        menuId: this.menuId,
        activityId: this.activityId,
      };
      request({
        url: `/api/cms/CmsActTypeUser/Actions/Export`,
        method: "GET",
        data: query,
      }).then((res) => {
        if (!res.data.url) return;
        this.jsbos.downloadFile(res.data.url);
        this.$refs.ExportBox.visible = false;
        this.exportBoxVisible = false;
      });
    },
    //导入
    importWinnerList() {
      this.importFormVisible = true;
      this.$nextTick(() => {
        this.$refs.importUserForm.init(this.activityId);
      });
    },
  },
};
</script>
<style scoped lang="scss">
.name {
  font-size: 50px;
  color: white;
  margin-left: 500px;
  margin-top: 140px;
  display: flex;
  align-items: center;
}

::v-deep .el-dialog__header {
  padding: 5px 20px;
  border-bottom: 1px solid white;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 400px;
  margin-top: 150px;
}

.bottom_box {
  display: flex;
}

.reward_type {
  margin-bottom: 30px;
  font-size: 30px;
  color: white;
}

.reward_button {
  margin-top: 30px;
}

.reward_number {
  margin-top: 20px;
  color: white;
}

.reward_number2 {
  font-size: 13px;
  margin-top: 20px;
  color: white;
}
.reward_number3 {
  margin-left: 10px;
  font-size: 13px;
  margin-top: 20px;
  color: white;
}

/* 确保 el-dialog 在页面中完全居中 */
.el_dialog1 {
  // top: 50%;
  // left: 50%;
}

.times {
  font-size: 16px;
  // font-weight: bold;
  margin-top: 15px;
}

.image {
  width: 200px;
  height: 200px;
}

.win_list {
  margin-left: 150px;
  margin-top: 100px;
}

.left_right {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.up_down {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.every_item {
  display: flex;
  flex-wrap: wrap;
}

.baifenbi {
  margin-left: 30px;
  margin-top: 15px;
}

.dialog_sty {
  height: 100%;
  background-image: url(../../../assets/images/choujiang.png);
}

>>> .el-upload-list__item {
  width: 200px !important;
  height: 220px !important;
}
.shengyu {
  // width: 200px;
  display: flex;
  // justify-content: space-between;
  align-items: center;
}
/* 添加一个自定义的CSS类来覆盖默认的el-dialog样式 */
.centered-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
